$("#province").on("change",function () {
    var city = $("#province").val();
    $("#area").html("");
    var html = " <option value=''>全部</option>";
    $("#area").append(html);
    getCity(city);
})
$("#city").on("change",function () {
    var city = $("#city").val();
    getArea(city);
})
function getCity(city){
    $.ajax({
        url: '/management/city',
        data: {city: city},
        type: 'POST',
        dataType: 'json',//返回的数据类型
        success: function (data) {
            var cityArray =  data.cityArray;
            $("#city").html("");
            var html = " <option value=''>全部</option>";
            $.each(cityArray, function (i, item) {
                html += "<option value='"+item.district_id+"'>" + item.district + "</option>";
            });
            $("#city").append(html);
        }
    })
}

function getArea(area){
    $.ajax({
        url: '/management/area',
        data: {area: area},
        type: 'POST',
        dataType: 'json',//返回的数据类型
        success: function (data) {
            var cityArray =  data.cityArray;
            $("#area").html("");
            var html = " <option value=''>全部</option>";
            $.each(cityArray, function (i, item) {
                html += "<option value='"+item.district_id+"'>" + item.district + "</option>";
            });
            $("#area").append(html);
        }
    })
}
$(document).ready(function(){
    ajaxList();
});
$(".search").click(function () {
    var data = $("#searchform").serialize();
    ajaxList(data);
});
function ajaxList(data) {
    $.ajax({
        url: '/management/applyEcharts',
        data: data,
        type: 'POST',
        dataType: 'json',//返回的数据类型
        success: function (data) {
            broken(data.totalAge.age,data.totalAge.total,'main1');
            pie(data.userSex.sex,'main2');
            columnPie(data.proposer.name,data.proposer.num,'已在本市居住','main3','#ffc000');
            columnPie(data.experience.name,data.experience.num,'养狗经验','main4','#70ad47');
            columnPie(data.environment.name,data.environment.num,'居住环境','main5','#ed7d31');
            columnPie(data.house.name,data.house.num,'房屋','main6','#7f7f7f');
            columnPie(data.petyet.name,data.petyet.num,'家中是否有宠物','main7','#9999ff');
            columnPie(data.dataReason.name,data.dataReason.num,'领养原因','main8','#00b0f0');
            columnPie(data.dataCohabit.name,data.dataCohabit.num,'同住人员','main9','#c00000');
            columnPie(data.dataCare.name,data.dataCare.num,'谁负责照顾狗狗','main10','#92d050');
        }
    })
}
        /**折线图***/
        function broken (dataX,dataY,id) {
        var myChart = echarts.init(document.getElementById(id));
         option = {
        title: {
            text: '年龄分布',
            x: 'center'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:dataX
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data:dataY,
            type: 'line',
            itemStyle : {
                normal : {
                    lineStyle:{
                        color:'yellow'
                    }
                }
            },
            areaStyle: {color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#a9d18e' // 0% 处的颜色
                }, {
                    offset: 1, color: '#a9d18e' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }}
         }]
        };
        myChart.setOption(option);
    }
        /**饼状图***/
        function pie(data,id) {
            var myChart2 = echarts.init(document.getElementById(id));
            option = {
                title : {
                    text: '性别',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:[ '#4472c4','#ed7d31'],
                series : [
                    {

                        type: 'pie',
                        data:data,
                    }
                ]
            };
            myChart2.setOption(option);
        }
        /***柱状图***/
        function columnPie(dataX,dataY,name,id,color) {
            var myChart = echarts.init(document.getElementById(id));
            option = {
                title: {
                    text:name,
                    x:'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    // axisLabel: {
                    //     show: true,
                    //     interval: 'auto',
                    //     formatter: '{value} %'
                    // },
                    // show: true
                },
                yAxis: {
                    type: 'category',
                    data: dataX,

                },
                series: [
                    {
                        type: 'bar',
                        data: dataY,
                        itemStyle:{
                            normal:{
                                color:color
                            },
                        },

                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter:"{c}%"
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }




